<template>
	<view>
		<uni-popup ref="popup" @change="onPopupChange" type="bottom" :isMaskClick="isMaskClick">
			
			
			<view class='box' style="width:100%;margin-left:0;border-bottom-left-radius: 0;border-bottom-right-radius: 0;">
				<view class='boxHead'>
					<text class="caption" v-if="title">{{title}}</text>
					<view class="windowBtn">
						<uni-icons type="closeempty" size="20" color='#ccc' @click="onCancel()"></uni-icons>
					</view>
				</view>
				<view class="boxBody">
					<slot></slot>
				</view>
				<view class="center padding-top-15 share-box" v-if="mode=='image'">
					<image :src="photo.imageUrl" style="height: 60vh;" show-menu-by-longpress mode="aspectFit" crossorigin="Anonymous" v-if="builded.photo"></image>
					<p-loading v-else></p-loading>
					<!-- #ifdef MP -->
					<button class="long-press">
						<u-icon name='share' size='12' color='white'></u-icon>
						<text>长按此图片转发</text>
					</button>
					<!-- #endif -->
				</view>
				<view class="uni-popup-share">
					<view v-if="border" class="share-border"></view>
					<view class="uni-share-content">
						
						<view class="uni-share-content-box" v-if="builded.photo">
							<view v-for="(item,index) in items" :key="index" v-if="mode=='' || item.mode.indexOf(mode)>=0">
								<!-- #ifdef MP -->
							
								<button class="uni-share-content-item" open-type="share" v-if="(item.name=='friend') && !(jumpMP && jumpMP.appId)" :id="target+'.'+item.name">
									<u-icon :name="item.icon" :color="item.color" size="90"></u-icon>
									<text class="uni-share-text">{{item.text}}</text>
									<text class="tips">{{item.tips}}</text>						
								</button>
								<button class="uni-share-content-item" open-type="share" v-else-if="(item.name=='photo') " :id="target+'.'+item.name">
									<u-icon :name="item.icon" :color="item.color" size="90"></u-icon>
									<text class="uni-share-text">{{item.text}}</text>
									<text class="tips">{{item.tips}}</text>						
								</button>
								<button class="uni-share-content-item" v-else @click.stop="select(item,index)">
									<u-icon :name="item.icon" :color="item.color" size="90"></u-icon>
									<text class="uni-share-text">{{item.text}}</text>			
									<text class="tips">{{item.tips}}</text>			
								</button>
								<!-- #endif -->
								<!-- #ifndef MP -->
								<button class="uni-share-content-item"  @click.stop="select(item,index)">
									<u-icon :name="item.icon" :color="item.color" size="90"></u-icon>
									<text class="uni-share-text">{{item.text}}</text>			
									<text class="tips">{{item.tips}}</text>			
								</button>
								<!-- #endif -->
							</view>
						</view>
						
						
					</view>

				</view>
			</view>
		
		</uni-popup>
		<uni-popup ref="scan" type="center" :isMaskClick="isMaskClick" v-if="mode!='image'">
			<view class='box'>
				<view class='boxHead'>
					<text class="caption">面对面扫码</text>
					<view class="windowBtn">
						<uni-icons type="closeempty" size="20" color='#ccc' @click="closeWindow('scan')"></uni-icons>
					</view>
				</view>
				<scroll-view scroll-y="true"  style="max-height: 80vh;">
					<view class="center padding-top-15">
						
						<image :src="scan.url" mode="widthFix" show-menu-by-longpress v-if="builded.scan"></image>
						<p-loading v-else></p-loading>
						
					</view>
					<view class="tips padding-top-15 center">
						<text>您也可以将此界面截图保存，发给您的朋友扫码！</text>
					</view>
				</scroll-view>
				<view class="boxFooter margin-top-20">
					<!-- #ifdef MP -->
					<button open-type="share" v-if="!(jumpMP && jumpMP.appId)" :id="target+'.scan'">
						转发给朋友				
					</button>
					<button v-else @click.stop="select({name:'scan'},'share')">
						转发给朋友		
					</button>
					<!-- #endif -->
					<!-- #ifndef MP -->
					<button @click.stop="select({name:'scan'},'share')">
						转发给朋友
					</button>
					<!-- #endif -->
					<button @click="saveImage('scan')">保存二维码</button>
				</view>
			</view>
		
		</uni-popup>
		<uni-popup ref="text" type="center" :isMaskClick="isMaskClick" v-if="mode!='image'">
			<view class='box'>
				<view class='boxHead'>
					<text class="caption">生成文字内容</text>
					<view class="windowBtn">
						<uni-icons type="closeempty" size="20" color='#ccc' @click="closeWindow('text')"></uni-icons>
					</view>
				</view>
				<scroll-view scroll-y="true"  style="max-height: 80vh;">
					<view class="boxBody ">
						<p-text-area placeholder="可填写分享的内容" v-model="text.content"></p-text-area>
					</view>
				</scroll-view>
				<view class="boxFooter margin-top-20">
					<button style='color:white;background:#00a4ff' @click="system.copy(text.content)">复制内容</button>
				</view>	
			</view>
		
		</uni-popup>
		<uni-popup ref="photo" type="center" :isMaskClick="isMaskClick" v-if="mode!='image'">
			<view class='box'>
				<view class='boxHead'>
					<text class="caption">保存分享图到相册</text>
					<view class="windowBtn">
						<uni-icons type="closeempty" size="20" color='#ccc' @click="closeWindow('photo')"></uni-icons>
					</view>
				</view>
				<scroll-view scroll-y="true"  style="max-height: 80vh;">
					<view class="center padding-top-15 share-box">
						<image :src="photo.imageUrl" show-menu-by-longpress mode="widthFix" v-if="builded.photo"></image>
						<p-loading v-else></p-loading>
						<!-- #ifdef MP -->
						<button class="long-press" v-if="(jumpMP && jumpMP.appId)">
							<u-icon name='share' size='12' color='white'></u-icon>
							<text>长按此图片转发</text>
						</button>
						<!-- #endif -->
					</view>
					<view class="tips padding-top-15 center">
						<text>您也可以将此界面截图保存，发给您的朋友扫码！</text>
					</view>
				</scroll-view>
				<view class="boxFooter margin-top-20">
					<!-- #ifdef MP -->
					<button @click.stop="dialog.msg('请长按上方图片后，然后选择“转发”')">
						转发给朋友		
					</button>
					<!-- #endif -->
					<!-- #ifndef MP -->
					<button @click.stop="select({name:'photo'},'share')">
						转发给朋友
					</button>
					<!-- #endif -->
					<button @click="saveImage('photo')">保存分享图</button>
				</view>
			</view>
		
		</uni-popup>
		<l-painter ref="painter" :hidden="true"  css="background:#ff0000;"/>
		<l-painter ref="qrcode" :hidden="true" v-if="mode!='' && scan.mode=='url'" css="width: 500rpx;height:500rpx;">
			<l-painter-qrcode
			    :text="scan.url"
			    css="width: 500rpx; height: 500rpx;object-position: 50% 50%;"
			  />
		</l-painter>
	</view>
</template>

<script>
	export default {
		name: 'PocketPopupShare',
		props: {
			title: {
				type: String,
				default: '分享到'
			},
			target: {
				type: String,
				default: 'share'
			},
			bottom: {
				type: String,
				default: '0px'
			},
			/* 单选还是多选 */
			isMaskClick: {
				type: Boolean,
				default () {
					return true
				}
			},
			border: {
				type: [Boolean,String],
				default: ''
			},
			jumpMP:{
				type: Object,
				default () {
					return {}
				}
			},
			jumpData:{
				type: Object,
				default () {
					return {}
				}
			},
			mode: {
				type: [String],
				default: 'default'
			},
		},
		data() {
			return {
				items: [
					{
						text: '微信好友',
						tips: '转发分享图',
						icon: 'weixin-circle-fill', 
						color:'#00aa00',
						mode:'image',
						name: 'photo'
					},
					{
						text: '微信好友',
						tips: '分享小程序',
						icon: 'weixin-circle-fill', 
						color:'#00aa00',
						mode:'default',
						name: 'friend'
					}	,
					{
						text: '朋友圈',
						tips: '发图片',
						icon: 'moments-circel-fill', 
						color:'#07aa5e',
						mode:'image,default',
						name: 'timeline'
					},					
					{
						text: '保存图片',
						tips: '保存到相册',
						icon: 'photo', 
						color:'#00aaFF',
						mode:'image',
						name: 'save_image'
					},{
						text: '面对面扫码',
						icon: 'scan', 
						tips: '展示二维码',
						color:'#FF0000',
						mode:'default',
						name: 'scan'
					},{
						text: '生成内容',
						tips:'发短信、消息',
						icon: 'file-text', 
						color:'#aa00ff',
						mode:'default',
						name: 'text'
					},
				],
				scan:{mode:'url',url:''},
				photo:{
					title:'',
					imageUrl:'',
				},
				timeline:{
					url:'',
					title:'',
					imageUrl:'',
				},
				friend:{
					imageUrl:'',
					title:''
				},
				text:{
					content:'安装维修找师傅，只用猴吉吉！'
				},
				share_data:false,
				builded:{
					friend:false,
					scan:false,
					timeline:false,
					photo:false,
					text:false,
				},
			}
		},
		mounted() {
			// 渲染
			//#ifdef MP
			uni.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			});
			//#endif
		},
		methods: {
			onPopupChange(e) {
				// 捕捉uniPopup点击遮罩层关闭事件
				if (!e.show) {
					if (this.isMaskClose) {
						this.$emit('cancel');
					}
					this.isMaskClose = true
				}
				this.$emit("popup_change", e);
			},
			onCancel() {
				this.$emit('cancel');
				this.close();
			},

			/**
			 * 选择内容
			 */
			select(item, index) {
				this.$emit('select', {
					item,
					index
				})
				this.close();
				uni.showLoading({
					title:'加载中...'
				});
				this.build(item.name).then(()=>{
					uni.hideLoading();
				}).catch(res=>{
					uni.hideLoading();
				});
					
				setTimeout(function () {
					uni.hideLoading();
					clearTimeout();
				}, 5000);
				
				//#ifdef MP-WEIXIN
				let image_url = '';
				if (item.name=='photo'){
					image_url = this.photo.imageUrl;
				}else if (item.name=='scan'){
					image_url = this.scan.url;
				}else if (item.name=='timeline'){
					image_url = this.timeline.imageUrl;
				}
				if (item.name=='friend' || index=='share') {
					if (this.jumpMP && this.jumpMP.appId){
						let params = {
							share_type:item.name,
							share_image:image_url,
						}
						params = Object.assign(params,this.jumpData);
						uni.navigateToMiniProgram({
						  appId: this.jumpMP.appId,
						  path: this.jumpMP.path,
						  extraData: params,
						  success(res) {
							// 打开成功
								uni.hideLoading();
						  },
						  fail() {
							  uni.hideLoading();
						  }
						});
						return false;
					}
				}
				// #endif
				if (this.$refs[item.name] && index!='share'){
					this.$refs[item.name].open();
				}
				//#ifdef APP
				else if (item.name=='timeline'){//APP模式下
					this.share.image(this.timeline.title,this.timeline.imageUrl,'timeline');
				}else if (item.name=='friend'){//APP模式下
					let data = {
						title:this.friend.title,
						imageUrl:this.friend.imageUrl,
						miniProgram:this.friend.miniProgram || this.jumpMP,
					}
					this.share.mp(data,'friend');
				}else if (item.name=='photo'){//APP模式下
					this.share.image(this.photo.title,this.photo.imageUrl);
				}else if (item.name=='save_image'){//APP模式下
					this.saveImage('photo');
				}else if (item.name=='text'){//APP模式下
					this.system.copy(this.text.content);
				}
				//#endif
				//#ifdef H5
				else if (item.name=='timeline'){//APP模式下
					this.saveImage('timeline').then(()=>{
						this.dialog.help('图片已保存到相机，请进入微信朋友圈中分享相机中的图片');
					});
					//this.dialog.help(this.timeline.imageUrl);
				}else if (item.name=='friend'){//APP模式下
					let data = {
						title:this.friend.title,
						imageUrl:this.friend.imageUrl,
						miniProgram:this.friend.miniProgram || this.jumpMP,
					}
					this.share.mp(data,'friend');
				}else if (item.name=='photo'){//APP模式下
					this.share.image(this.photo.title,this.photo.imageUrl);
				}else if (item.name=='save_image'){//APP模式下
						this.saveImage('photo');					
				}else if (item.name=='text'){//APP模式下
					this.system.copy(this.text.content);
				}
				//#endif
				//#ifdef MP
				else if (item.name=='timeline'){//APP模式下
					this.saveImage('timeline').then(()=>{
						this.dialog.help('图片已保存到相机，请进入微信朋友圈中分享相机中的图片');
					});
					return false;
				}else if (item.name=='save_image'){//APP模式下
					this.saveImage('photo');
					return false;
				}else if (item.name=='friend'){//APP模式下
					return this.friend;
				}else if (item.name=='photo'){//APP模式下
					return this.photo;
				}
				//#endif
			},
			open(share) {
				this.share_data = share;
				this.$refs.popup.open();
				this.$emit('open');
				this.build('photo');
			},
			build(type){
				let that = this;
				return new Promise((resolve, reject) => {
					if (this.builded[type] || !this.share_data){
						resolve();
					}
					if (type=='photo'){
						
						if (that.share_data.photo_mode=='json' && that.share_data.photo.title){
							that.photo.title = that.share_data.photo.title;
						}
						if (that.share_data.photo_mode=='json'){
							that.$refs.painter.render(that.share_data.photo);
							// 生成图片
							
							that.$refs.painter.canvasToTempFilePathSync({
								fileType: "jpg",
								// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
								pathType: 'url',
								quality: 1,
								success: (res) => {
									that.photo.imageUrl = res.tempFilePath;
									that.builded[type] = true;
									resolve();
									
								},
								fail: (res)=> {
									reject(res);
									console.log('保存本地失败',res);
								}
					
							});
						}else{
							that.photo.imageUrl = that.share_data.photo;
							that.builded[type] = true;
							resolve();
						}
						
						
					}else if (type=='timeline'){
						if (this.share_data.timeline_mode && this.share_data.timeline_mode=='from_photo'){
							this.build('photo').then(res=>{
								that.timeline.imageUrl = that.photo.imageUrl;
								that.builded[type] = true;
								if (that.share_data.photo_mode=='json' && that.share_data.photo.title){
									that.timeline.title = that.share_data.photo.title;
								}
								resolve();
							}).catch(res=>{
								reject(res);
							});
							
							
						}else if (this.share_data.timeline_mode=='mp'){
							this.timeline = this.share_data.timeline;
							resolve();
						}else if (this.share_data.timeline_mode=='json'){
							if (this.share_data.timeline.title){
								this.timeline.title = this.share_data.timeline.title;
							}
							this.$refs.painter.render(this.share_data.timeline);
							// 生成图片
							this.$refs.painter.canvasToTempFilePathSync({
								fileType: "jpg",
								// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
								pathType: 'url',
								quality: 1,
								success: (res) => {
									that.timeline.imageUrl = res.tempFilePath;
									that.builded[type] = true;
									resolve();
								},
								fail: (res)=> {
									reject(res);
									console.log('保存本地失败',res);
								}
							
							});
						}
						
					}else if (type=='friend'){
						if (this.share_data.friend_mode){
							if (this.share_data.friend_mode=='from_photo'){
								this.build('photo').then(res=>{
									this.friend.imageUrl = this.photo.imageUrl;
									if (this.share_data.photo_mode=='json' && this.share_data.photo.title){
										this.friend.title = this.share_data.photo.title;
									}
									resolve();
								}).catch(res=>{
									reject(res);
								});
								
							}else if (this.share_data.friend_mode=='mp'){
								this.friend = this.share_data.friend;
								resolve();
							}else if (this.share_data.friend_mode=='json'){
								if (this.share_data.friend.title){
									this.friend.title = this.share_data.friend.title;
								}
								this.$refs.painter.render(this.share_data.friend);
								// 生成图片
								this.$refs.painter.canvasToTempFilePathSync({
									fileType: "jpg",
									// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
									pathType: 'url',
									quality: 1,
									success: (res) => {
										that.friend.imageUrl = res.tempFilePath;
										that.builded[type] = true;
										resolve();
									},
									fail: (res)=> {
										reject(res);
										console.log('保存本地失败',res);
									}
								
								});
							}
							
						}
					
					}else if (type=='text'){
						if (this.share_data && this.share_data.text){
							this.text.content = this.share_data.text;
						}
						this.builded[type] = true;
						resolve();
					}else if (type=='scan'){
						if (this.share_data && this.share_data.scan){
							this.scan.mode = this.share_data.scan_mode;
							this.scan.url = this.share_data.scan;
							if (this.scan.mode=='url'){
								this.$refs.qrcode.canvasToTempFilePathSync({
									fileType: "jpg",
									// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
									pathType: 'url',
									quality: 1,
									success: (res) => {
										that.scan.url = res.tempFilePath;
										that.builded[type] = true;
										resolve();
									},
									fail: (res)=> {
										console.log('保存本地失败',res);
										reject(res);
									}
								
								});
							}else{
								that.builded[type] = true;
								resolve();
							}
							
						}
						
					}
				});
				
			},
			saveImage(type){
				let image_url;
				if (type=='photo'){
					image_url = this.photo.imageUrl;
				}else if (type=='scan'){
					image_url = this.scan.url;
				}else if (type=='timeline'){
					image_url = this.timeline.imageUrl;
				}
				//非H5 保存到相册
				if (image_url){
					return this.system.saveImage(image_url);
				}else{
					return new Promise((resolve, reject) => {
						this.dialog.msg('图片保存失败，请稍后再试！').then(()=>{
							reject();
						});
					});
					
				}
			},
			/**
			 * 关闭窗口
			 */
			close() {
				this.$refs.popup.close();
				this.$emit('close');
			},
			closeWindow(name){
				if (this.$refs[name]){
					this.$refs[name].close();
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.uni-popup-share {
		width:100%;
	}
	.share-border{
		padding-top: 10px;
		margin-top:20px;
		border-top: 1px solid #eee;
	}
	.uni-share-content {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		
	}

	.uni-share-content-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		flex-wrap: wrap;
		width: 100%;
		justify-content: space-around;
	}

	.uni-share-content-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		padding: 10px 0;
		align-items: center;
		background: none;
		line-height: 1.5;
		border: none;
	}

	.uni-share-content-item:active {
		background-color: #f5f5f5;
	}
	.uni-share-content-item:after {
		border:none;
		position: relative;
	}
	.uni-share-image {
		width: 30px;
		height: 30px;
	}
	.long-press{
		position: absolute;
		background: rgba(0, 0, 0, 0.7);
		color: white;
		top: 20px;
		right: 15px;
		padding: 0px 10px;
		margin: 0px;
		display: flex;
		align-items: center;
		line-height: 1.7;
		border-radius: 20px;
		
		&>text {
			font-size: 14px;
			margin-left: 5px;
		}
	}
	.share-box{
		position: relative;
	}
	.uni-share-text {
		margin-top: 10px;
		font-size: 14px;
		color: #3B4144;
	}
	
</style>
